<template>
    <!-- <div> -->
        <img :src="src" alt="">
    <!-- </div> -->
</template>
<script>
export default {
    props: {
        pic: String
    },
    data() {
        return {
            src: require('@/static/images/loading.jpeg'),
            d: null
        }
    },

    watch: {
        pic: {
            immediate: true,
            handler(nSrc, oSrc) {
                // console.log(nSrc)
                let img = new Image();
                img.src = nSrc;
                img.onload = () => {
                    this.d = setTimeout(()=>{
                        this.src = img.src;
                    },300)
                }
            }
        }
    }
}
</script>
<style>
img {
    vertical-align: middle;
    width: 100%;
    border-radius: 5px;
}
</style>